<template>
	<view class="content">
		<view class="box d-jc-sa tap">
			<view class="tap-text" @tap='changeActive(item,index)' :class="chooseIndex==index?'tap-text-active' :''"
				v-for="(item,index) in (isDispatching?tab2:tab1)">
				{{item.title}}
			</view>
		</view>
		<view class="">
			<scroll-view scroll-y="true" :style="{height:height+'px'}" >
				<view class="bg-box order-info" @tap="openOrderInfo(item)"  v-for="(item,index) in orderList"
					:key='index'>
					<view class="box d-jc-sb">
						<text>订单号：{{item.orderNumber}}</text>
						<text v-if="item.orderStatus==1">
							<text style="color: #FF3333;" v-if="item.takesState==3">已送达</text>
							<text style="color: #FF3333;" v-if="item.takesState==2">配送中</text>
							<text style="color: #FF3333;" v-if="item.takesState==1">待配送</text>
							<text v-if="item.isTakes==-1">
								<text style="color: #FF3333;" else>已支付</text>
							</text>
							<text v-if="item.isTakes==2">
								<text style="color: #FF3333;" else>待自提</text>
							</text>
							
						</text>
						
						<text style="color: #FF3333;" v-if="item.orderStatus==2">已完成</text>
						<text style="color: #FF3333;" v-if="item.orderStatus==3">已取消</text>
						<text style="color: #FF3333;" v-if="item.orderStatus==-3">退款中</text>
						<text style="color: #FF3333;" v-if="item.orderStatus==-4">已退款</text>
						<text style="color: #FF3333;" v-if="item.orderStatus==-5">退款失败</text>
					</view>
					<view class="" v-for="(item2,index2) in item.goodSkuDto" :key='index2'>
						<view class="box content d-ai-c my-2 ">
							<view class="flex-8 box">
								<view class="box d-jc-c ">
									<image :src="item2.image" mode=""></image>
								</view>
								<view class="box-c d-jc-sb ml-1">
									<text class="title">{{item2.goodsName}}</text>
									<text class="text-pink">{{item2.goodsPrice}}积分</text>
								</view>
							</view>
							<view class="flex-1 box">
								<text class="number">x{{item2.number}}</text>

							</view>
						</view>
					</view>
					<view class="total">
						合计：<text>{{item.goodsPrice}}&nbsp积分</text>
					</view>
				</view>
			</scroll-view>

		</view>



	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				orderList: '',
				height: '',
				tab1: [{
						title: '全部订单',
						code: '',
						state: ''
					},
					{
						title: '待核销',
						code: '1',
						state: ''
					},
					{
						title: '已完成',
						code: '2',
						state: ''
					}, //不是配送商家
					{
						title: '退款',
						code: '9',
						state: ''
					}
				],
				tab2: [{
						title: '全部订单',
						code: '',
						state: ''
					},
					{
						title: '待配送',
						code: '1',
						state: '1'
					},{
						title: '待自提',
						code: '1',
						state: '-1'
					},
					{
						title: '待确认',
						code: '1',
						state: '8'
					},
					{
						title: '已完成',
						code: '2',
						state: '' //
					},
					{
						title: '退款',
						code: '9',
						state: ''
					}
				], //配送商家
				chooseIndex: 0,
				orderParameter: this.$store.state.orderParameter,
				pageNum:1,
				pageSize:900



			}
		},
		onLoad(parameter) {
			this.getShopOrders(this.orderParameter.state, this.orderParameter.takesState)
			this.changeActive2()
		},
		onShow() {
			this.getShopOrders(this.orderParameter.state, this.orderParameter.takesState)
			this.changeActive2()
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					_this.height = res.windowHeight - uni.upx2px(100) //windoHeight为窗口高度，主要使用的是这个

				}

			})
		},
		computed: mapState(['shopInfo', 'loginState', 'isDispatching']),
		methods: {
			nextPage() {
				this.getShopOrders(item.code, item.state)
			},
			openOrderInfo(item) {
				this.$store.state.orderNumber=item.orderNumber
				//配送商家
				if (item.isTakes == 1 || item.isTakes == 2) {
					uni.navigateTo({
						url: 'orderInfo'
					})
				} else {
					uni.navigateTo({
						url:'orderInfoHospital'
					})
				}

			},
			//首次加载页面激活选择状态
			changeActive2() {
				this.chooseIndex = this.orderParameter.index
			},
			changeActive(item, index) {
				if (this.chooseIndex == index) {

				} else {
					this.chooseIndex = index
					this.getShopOrders(item.code, item.state)
				}
			},
			//获取店铺订单
			getShopOrders(orderStatus, takesState) {
				console.log(this.isDispatching)
				this.$api.getShopOrders({
					orderStatus: orderStatus,
					takesState: takesState
				},this.pageNum,this.pageSize).then((res) => {
					this.orderList = res.data.dataMap.list

				})
			},

		}
	}
</script>

<style lang="less" scoped>
	// .content{
	// 	position: absolute;
	// 	height: 100%;
	// 	width: 100%;
	// 	background: #efefef;
	// 	top: 0;
	// 	left: 0;
	// 	overflow-y: auto;
	// }
	page {
		background-color: #f8f8f8;
		color: #333;

		.order-info {
			padding: 10rpx 30rpx;
			margin-top: 20rpx;

			.total {
				text {
					color: #FF5551;
				}
			}

			.content {
				.text-line {
					text {
						text-decoration: line-through
					}
				}

				.number {
					color: #666666;
					font-size: 30rpx;
					width: 100rpx;
					text-align: end;
					margin-top: 55rpx;
				}

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 10rpx;
				}
			}
		}

		.tap {
			height: 80rpx;
			width: 100%;
			background-color: #fff;

			.tap-text {
				line-height: 90rpx;
				color: #333;
			}

			.tap-text-active {
				border-bottom: #FF5551 solid 4rpx;
				color: #FF5551;
			}
		}


	}
</style>
